<template>
  <div>
    <el-collapse v-model="activeNames">
      <el-collapse-item title="公共配置" name="1">
        <el-row :gutter="10" :span="12" class="pad-lft-rgt-10">
          <el-col :span="12">
            <div class="flex-com mar-btm">
              <span class="label-title">组件颜色</span>
              <PopoverColor :colorValue="widget.UI.data.componentColor">
                <CustomColorPicker v-model="widget.UI.data.componentColor" show-alpha></CustomColorPicker>
              </PopoverColor>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="flex-com mar-btm">
              <span class="label-title">标题颜色</span>
              <PopoverColor :colorValue="widget.UI.data.textColor">
                <CustomColorPicker v-model="widget.UI.data.textColor" show-alpha></CustomColorPicker>
              </PopoverColor>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="flex-com mar-btm">
              <span class="label-title">时间颜色</span>
              <PopoverColor :colorValue="widget.UI.data.secondaryTextColor">
                <CustomColorPicker v-model="widget.UI.data.secondaryTextColor" show-alpha></CustomColorPicker>
              </PopoverColor>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="flex-com mar-btm">
              <span class="label-title">结束背景</span>
              <PopoverColor :colorValue="widget.UI.data.tagColor1">
                <CustomColorPicker v-model="widget.UI.data.tagColor1" show-alpha></CustomColorPicker>
              </PopoverColor>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="flex-com mar-btm">
              <span class="label-title">进行背景</span>
              <PopoverColor :colorValue="widget.UI.data.tagColor2">
                <CustomColorPicker v-model="widget.UI.data.tagColor2" show-alpha></CustomColorPicker>
              </PopoverColor>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="flex-com mar-btm">
              <span class="label-title">未来背景</span>
              <PopoverColor :colorValue="widget.UI.data.tagColor3">
                <CustomColorPicker v-model="widget.UI.data.tagColor3" show-alpha></CustomColorPicker>
              </PopoverColor>
            </div>
          </el-col>
        </el-row>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>>
<script>
  import CustomColorPicker from '@/components/IDE/colorPicker/Color.vue';
  import {MeetingList} from "@/modules/IDE/widget/custom/meetingList";
  import PopoverColor from '@/components/IDE/colorPicker/Popovers.vue';

  export default {
    name: 'MatrixSpec',
    components: {
      CustomColorPicker, PopoverColor
    },
    props: {
      widget: {
        type: MeetingList,
        default: () => {
          return {};
        }
      }
    },
    data() {
      return {
        activeNames: [
          '1'
        ]
      }
    },
  }
</script>
<style lang="less" scoped>
  .flex-com {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .label-title {
    display: inline-block;
    min-width: 56px;
    color: @colorGray10;
    font-size: 14px;
    margin-right: 5px;
  }

  .addAction {
    color: #2d69e0;
    font-size: 14px;
  }

  .divider {
    height: 2px;
    background: #eee;
    margin: 10px 0;
  }
</style>
